import React, { Component } from "react";
import { Layout } from 'antd';
// import { HomeOutlined } from '@ant-design/icons';
import LayoutAside from "../components/asideMenu/Index";
import LayoutHeader from "./header";
import ContainerMain from "../components/containerMain/Index";
// import NewBreadcrumb from '../components/routeBreadcrumb/index';
import "./index.scss";

const { Sider, Content, Footer } = Layout;

class SiderForm extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(this.props);
        this.setState({ collapsed });
    };

    render() {
        const { collapsed } = this.state;
        // const path = window.location.pathname
        // const menuKey = path.split("/").slice(0, 3).join('/')
        return (
            <Layout>
                {/* 顶部布局 */}
                <LayoutHeader></LayoutHeader>
                <Layout>
                {/* 侧边栏 */}
                    <Sider width={200} className="ant-layout-sider" collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                        <LayoutAside />
                    </Sider>
                    <Layout style={{ padding: '50px 24px 24px' }}>
                        {/* { menuKey === '/index/domain' ? <NewBreadcrumb pathname={window.location.pathname} /> : null } */}
                {/* 内容部分 */}
                        <Content className="site-layout-main">
                            <ContainerMain />
                        </Content>
                {/* 底部布局 */}
                        <Footer style={{ textAlign: 'center' }}>Ant Design ©2021 Created by Raycloud Ops</Footer>
                    </Layout>
                </Layout>
            </Layout>
        );
    }
}

export default SiderForm;